<template>
	<view class='shop-cart'>
		
		<template v-if='  list.length > 0  '>
		
		
		<uni-nav-bar title="购物车" :right-text='  isNavBar?"完成":"编辑"   ' 
		border='fasle' @clickRight='isNavBar = !isNavBar'/>

		<!--商品内容-->
		<view class='shop-list'>
			<view class='shop-item' v-for='(item,index) in list' :key='index'>
				<label class="radio" @tap='selectedItem(index)'>
					<radio value="" color="#FF3333" :checked="item.checked"/><text></text>
				</label>
				<image class='shop-img' :src="item.imgUrl" mode=""></image>
				<view class='shop-text'>
					<view class='shop-name'>{{item.name}}</view>
					<view class='shop-color f-color'>{{item.color}}</view>
					<view class='shop-price'>
						<view>¥{{item.pprice}}</view>
						
						<template v-if='!isNavBar'>
							<view>*{{item.num}}</view>
						</template>
						
						<template v-else>
						<uni-number-box 
						:min='1'
						:value='item.num'
						@change='changeNumber($event,index,item)' />
						
						</template>
						<!-- $event 当前输入的 -->
					</view>
				</view>
			</view>
		</view>
		<!--底部-->
		<view class='shop-foot'>
			<label class="radio foot-radio" @tap='checkedAllFn'>
				<radio value="" color='#FF3333' :checked="checkedAll"/><text>全选</text>
			</label>
			
			<template v-if='!isNavBar'>
				<view class='foot-total'>
					<view class='foot-count'>合计：
					<text class='f-active-color'>¥{{totalCount.pprice}}</text></view>
					<view class='foot-num' @tap='goConfirmOrder'>结算({{totalCount.num}})</view>
				</view>
			</template>
			
			<template v-else>
				<view class='foot-total'>
					<view class='foot-num' style="background-color: #000000;">移入收藏夹</view>
					<view class='foot-num' @tap='delGoodsFn'>删除</view>
				</view>
			</template>
		
			
		</view>
		</template>
		
		<template v-else>
			<uni-nav-bar title="购物车" status-bar='true' fixed='true'/>
			<view class='shop-else-list'>
				<text>囧～购物车还是空的～</text>
			</view>
		</template>
		<Tabbar cureentPage='shopcart'></Tabbar>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import {mapState,mapActions,mapGetters,mapMutations} from 'vuex'
	import Tabbar from '@/components/common/Tabbar.vue'
	export default {
		components:{Tabbar},
		data() {
			return {
				isNavBar:false
			}
		},
		onShow() {
			this.getData();
		},
		computed:{
			...mapState({
				// a:state => state.cart.a
				list:state=>state.cart.list,
				selectedList:state=>state.cart.selectedList
			}),
			...mapGetters(['checkedAll','totalCount'])
		},
		
		methods: {
			...mapActions(['checkedAllFn','delGoodsFn']),
			...mapMutations(['selectedItem','initGetData','initOrder']),
			
			//进入确认订单
			goConfirmOrder(){
				//  this.selectedList ： 需要结算的商品id
				if( this.selectedList.length === 0 ){
					return uni.showToast({
						title:"请至少选择一件商品",
						icon:"none"
					})
				}
				//跳转页面
				    uni.navigateTo({
				    	url:`../confirm-order/confirm-order?detail=${JSON.stringify(this.selectedList)}`
				    })
				
				// 需要结算的商品：
				let newList = [];
				this.list.forEach(item=>{
				    this.selectedList.filter(v=>{
				        if( item.id == v ){
				            newList.push( item );
				        }
				    })
				})
			},
			
			// 编辑购物车的数量：
			changeNumber(value,index,item){
				// console.log(value); // 当前输入的值
				// this.list[index].num = value;
				
				if( item.num == value ) return;
				$http.request({
					url:"/updateNumCart",
					method:"POST",
					data:{
						goodsId:item.goods_id,
						num:value
					}
				}).then((res)=>{
					// console.log(res);
					this.list[index].num = value;
				}).catch(()=>{
					uni.showToast({
						title:'请求失败',
						icon:'none'
					})
				})
				
			},
			
			 // 获取购物车数据
			getData(){
				$http.request({
					url:"/selectCart",
					method:"POST",
				}).then((res)=>{
					// console.log(res);
					this.initGetData(res);
				}).catch(()=>{
					uni.showToast({
						title:'请求失败',
						icon:'none'
					})
				})
			},
			
		}
	}
</script>

<style scoped>

.shop-list{
	padding-bottom:100rpx;
}
.shop-else-list{
	position: absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background-color: #F7F7F7;
	display: flex;
	align-items: center;
	justify-content: center;
}
.shop-item{
	display: flex;
	padding:20rpx;
	align-items: center;
	background-color: #F7F7F7;
	margin-bottom:10rpx;
}
.shop-img{
	width:200rpx;
	height: 200rpx;
}
.shop-text{
	flex:1;
	padding-left:20rpx;
}
.shop-color{
	font-size:24rpx;
}
.shop-price{
	display: flex;
	justify-content: space-between;
}
.shop-foot{
	border-top:2rpx solid #F7F7F7;
	background-color: #FFFFFF;
	position: fixed;
	bottom:120rpx;
	left:0;
	width:100%;
	height: 100rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.foot-radio{
	padding-left:20rpx;
}
.foot-total{
	display: flex;
}
.foot-count{
	line-height: 100rpx;
	padding:0 20rpx;
	font-size:32rpx;
}
.foot-num{
	background-color: #49BDFB;
	color:#FFFFFF;
	padding:0 60rpx;
	line-height: 100rpx;
}
</style>
